<template>
  <div class="bg-style">
    <i-pageBody class="add_color">
      <div slot="page-main">
        <Tabs size="small" class="block block2" v-model="name" :value="name">
          <TabPane :label="label1" name="basic">
            <single-control ref="basicTable"></single-control>
          </TabPane>
          <TabPane :label="label2" name="search">
            <multiple-control v-if="name==='search'" ref="tableSearch"></multiple-control>
          </TabPane>
        </Tabs>
      </div>
    </i-pageBody>
  </div>
</template>

<script>
import SingleControl from './singleControl'
import MultipleControl from "./multipleControl";

export default {
    name: "control",
    props: {},
    data() {
        return {
            label1: "",
            label2: "",
            leaveName: "",
            name: ''
        };
    },
    computed: {},
    created() {
        this.label1 = this.getLabel("单点控制", "basic");
        this.label2 = this.getLabel("批量控制", "search");
    },
    mounted() {

    },
    watch: {},
    methods: {
        tabClick(tab) {
            this.leaveName = tab;
            let multipleModel = this.$refs.tableSearch || {};
            this.saveTip = this.$refs.basicTable.tabDisabled ||
                (multipleModel.tabDisabled&& multipleModel.dataOriginal&& multipleModel.dataOriginal.length>0);
            return this.saveTip;
        },

        getLabel(label, name) {
            var me = this;
            return h => {
                return h(
                    "div",
                    {
                        style: {
                            padding: "8px 16px"
                        },
                        on: {
                            click: e => {
                                var tip = me.tabClick(name); // 判断条件是否满足
                                if (tip) {
                                    e.stopPropagation(); // 不满足条件则阻止事件冒泡 本质是不让触发tab的on-click事件
                                    me.$Modal.confirm({
                                        title: '确认提示',
                                        content: `系统不会保存当前页面数据，请确认是否离开`,
                                        onOk: () => {
                                            me.name='basic'
                                        },
                                        onCancle: () => {
                                        }
                                    });


                                } else {
                                    console.log("离开");
                                }
                            }
                        }
                    },
                    label
                );
            };
        }
    },
    components: {MultipleControl, SingleControl}
};
</script>

<style scoped lang="scss">

</style>
